<script setup>
import { inject, onBeforeUnmount, onMounted, ref, watch } from "vue"
import { household, reset_params } from "@/js/request_params"
import { get_json_object } from "@/js/area"
import { housetype, relation, gender, bloodMap, nation, education, marry, military } from "@/js/base_info_map";
import zhCn from "element-plus/es/locale/lang/zh-cn"
import { disabledDate } from "@/js/date_handle"
import { Object } from "core-js";
import { aplly_Id_Card } from "@/api/idCard";
import { build_Id_Card } from "@/api/idCard";
import { finish_Id_Card } from "@/api/idCard";
import { loss_Id_Card } from "@/api/idCard";
import { send_Id_Card } from "@/api/idCard";
import { delete_Id_Card, select_id_info } from "@/api/idCard";
import { select_res_idnum_info } from "@/js/resident_request_func";
import { userStore } from "@/store/user";
import { ElMessage } from "element-plus";
import { } from "@/api/idCard"
// 后续扩展请复制该文件
//family_establishment_服务
let json_object = ref([]);
const locale = ref(zhCn);
const service_form = ref();
const direction = ref('btt');
const store = userStore();
const drawer = ref(false);
household.value.housetypeId = 1;
household.value.changetype = "户口立户"
const query_response = ref([
  {
    householdType: "家庭户口",
    housenum: '1',
    relation: '户主',
    name: '耳春龙',
    gender: '男',
    nation: '汉族',
    idnum: '111'
  }
]);
const handle_close = () => {
  drawer.value = false;
}

const initId = () => {
  household.value.pid = store.get_use_info.pid;
  household.value.operatorId = store.get_use_info.id;
  household.value.changetype = "身份证业务";
  household.value.changereson = "身份证业务";
  household.value.pname = store.get_use_info.pname;
  household.value.popTypeId = 1;
}

const handle_change = (value) => {
  console.log(value);
}
onMounted(async () => {
  let response = await get_json_object()
  json_object.value.push(response);
  initId()
})
const apllyIdCard = () => {
  if (household.value.idnum == "") {
    ElMessage.error("身份证号未填写");
  } else {
    aplly_Id_Card(household.value).then((res) => {
      ElMessage.success(res.msg);
      //   drawer=true;
    })
  }

}
const buildIdCard = () => {
  build_Id_Card(household.value).then((res) => {
    ElMessage.success(res.msg);
  })
}
const finishIdCard = () => {
  finish_Id_Card(household.value).then((res) => {
    ElMessage.success(res.msg);
  })
}
const sendIdCard = () => {
  send_Id_Card(household.value).then((res) => {
    ElMessage.success(res.msg);
  })
}
const lossIdCardiveCard = () => {
  loss_Id_Card(household.value).then((res) => {
    ElMessage.success(res.msg);
  })
}
const deleteIdCard = () => {
  delete_Id_Card(household.value).then((res) => {
    ElMessage.success(res.msg);
    // resteFloat();
  })
}
const selectIdCardByIdnum = () => {
  select_id_info({ 'idNum': household.value.idnum }).then((res) => {
    ElMessage.success(res.msg);
  })
}
onBeforeUnmount(() => {
  reset_params(household.value)
})
</script>
<template>
  <!-- 表单 -->
  <el-drawer v-model="drawer" title="查询结果" :direction="direction" :before-close="handle_close">
    <template #default>
      <div class="w-[100%] h-[100%] flex justify-center">
        <el-table :data="query_response" stripe style="width: 100%">
          <el-table-column prop="householdType" label="户口类型" width="220" />
          <el-table-column prop="housenum" label="户号" width="220" />
          <el-table-column prop="relation" label="关系" width="220" />
          <el-table-column prop="name" label="姓名" width="220" />
          <el-table-column prop="gender" label="性别" width="220" />
          <el-table-column prop="nation" label="民族" width="220" />
          <el-table-column prop="idnum" label="证号" />
        </el-table>
      </div>
    </template>
  </el-drawer>
  <div class="w-[100%] h-[100%] flex justify-center">
    <div class="card w-[100%] h-[100%] flex justify-center">
      <spa class="span"></spa>
      <span class="span"></span>
      <span class="span"></span>
      <spa class="span"></spa>
      <div class="shell shadow-xl" style="width:90%;height:90%">
        <svg class="check" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">

          <path
            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z">
          </path>
        </svg>
        <p class="tracking-[10px] text-[20px] font-[800] text-black">身份证业务</p>
        <el-form class="grid  grid-cols-3 gap-x-14 -gap-y-1  relative justify-items-center items-center"
          :model="household" ref="service_form" :rules="rules">
          <el-form-item label="户口类别:">
            <el-select v-model="household.housetypeId" placeholder="请填写" disabled style="width: 180px">
              <el-option v-for="index in Object.keys(housetype).length" :key="index" :label="housetype[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="派出所:">
            <el-input v-model="household.pname" placeholder="请填写" disabled></el-input>
            <!-- <el-input v-model=" household.pname"  disabled style="width:180px"></el-input> -->
          </el-form-item>
          <el-form-item label="户号:">
            <el-input v-model="household.housenum" placeholder="请填写内容(顺序生成)" disabled style="width:180px"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input v-model="household.name" placeholder="请填写内容" disabled></el-input>
          </el-form-item>
          <el-form-item label="家庭关系:">
            <el-select v-model="household.relationId" placeholder="" disabled>
              <el-option v-for="index in Object.keys(relation).length" :key="index" :label="relation[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="住所:">
            <el-input v-model="household.name" placeholder="请填写内容" disabled></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-select disabled v-model="household.genderId" placeholder="">
              <el-option v-for="index in Object.keys(gender).length" :key="index" :label="gender[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期:">
            <el-config-provider :locale="locale">
              <el-date-picker style="width:180px" v-model="household.birthday" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" type="date" placeholder="请选择" :disabled-date="disabledDate"
                :size="'default'" />
            </el-config-provider>
          </el-form-item>
          <el-form-item label="身份证号:">
            <el-input v-model="household.idnum" placeholder="请填写内容" @change="select_res_idnum_info"></el-input>
          </el-form-item>
          <el-form-item label="血型:">
            <el-select disabled v-model="household.bloodId" placeholder="">
              <el-option v-for="index in Object.keys(bloodMap).length" :key="index" :label="bloodMap[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="民族:">
            <el-select disabled v-model="household.nationId" placeholder="">
              <el-option disabled v-for="index in Object.keys(nation).length" :key="index" :label="nation[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职业:">
            <el-input v-model="household.work" placeholder="请填写内容" disabled></el-input>
          </el-form-item>
          <el-form-item label="文化程度:">
            <el-select disabled v-model="household.eduId" placeholder="">
              <el-option v-for="index in Object.keys(education).length" :key="index" :label="education[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻状况:">
            <el-select disabled v-model="household.marryId" placeholder="">
              <el-option disabled v-for="index in Object.keys(marry).length" :key="index" :label="marry[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="兵役状况:">
            <el-select disabled v-model="household.militaryId" placeholder="">
              <el-option v-for="index in Object.keys(military).length" :key="index" :label="military[index]"
                :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编号:">
            <el-input v-model="store.get_use_info.pnum" placeholder="请填写内容" disabled style="width:180px"></el-input>
          </el-form-item>
          <el-form-item label="派出所:">
            <el-input v-model="household.pname" placeholder="请填写内容" disabled style="width:180px"></el-input>
          </el-form-item>
          <el-form-item label="业务类型:">
            <el-input v-model="household.changetype" placeholder="请填写内容" disabled style="width:180px"></el-input>
          </el-form-item>
        </el-form>

        <hr>
        <div class="relative -top-1  flex justify-around items-center">
          <button class="card_button" @click="apllyIdCard">
            申领
            <svg class="arrow" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
              <path
                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
              </path>
            </svg>
          </button>
          <button class="card_button" @click="buildIdCard">
            开始制证
            <svg class="arrow" xmlns="" height="1em" viewBox="0 0 512 512">
              <path
                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
              </path>
            </svg>
          </button>
          <button class="card_button" @click="finishIdCard">
            制证完毕
            <svg class="arrow" xmlns="" height="1em" viewBox="0 0 512 512">
              <path
                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
              </path>
            </svg>
          </button>
          <button class="card_button" @click="sendIdCard">
            发证
            <svg class="arrow" xmlns="" height="1em" viewBox="0 0 512 512">
              <path
                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
              </path>
            </svg>
          </button>
          <button class="card_button" @click="lossIdCardiveCard">
            挂失
            <svg class="arrow" xmlns="" height="1em" viewBox="0 0 512 512">
              <path
                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
              </path>
            </svg>
          </button>
          <button class="card_button" @click="deleteIdCard">
            作废
            <svg class="arrow" xmlns="" height="1em" viewBox="0 0 512 512">
              <path
                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
              </path>
            </svg>
          </button>
          <button class="card_button" @click="selectIdCardByIdnum">
            办证查询
            <svg class="arrow" xmlns="" height="1em" viewBox="0 0 512 512">
              <path
                d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z">
              </path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url(../css/form_card.css);

.el-form {
  height: 70%;
}

:deep(.el-input__wrapper:hover) {
  --tw-ring-color: rgb(233 213 255);
  box-shadow: var(--tw-ring-inset) 0 0 3px calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  scale: 1.03;
}

:deep(.el-input__wrapper) {
  transition: all 500ms;
}

.el-input :deep(.el-input__wrapper.is-focus) {
  --tw-ring-color: rgb(216 180 254);
  --tw-ring-offset-color: #84f2fc;
  box-shadow: var(--tw-ring-inset) 0 0 3px calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

}

.el-input :deep(.el-input__wrapper) {
  transition: all 500ms;
}

.el-input,
.el-select {

  width: 180px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

:deep(.el-form-item__label) {
  text-shadow: 1px 2px 2px rgba(165, 165, 165, 0.8);
}

.el-form-item:nth-child(1) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(2) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 6px;
}

.el-form-item:nth-child(3) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(4) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(5) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(6) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(7) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(8) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(9) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(10) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(11) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(12) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(13) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(14) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(15) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(16) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(17) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(18) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 1px;
}
</style>
